<template>
  <!-- 2023年4月5日09点28分 商品收藏查询页面 -->
<div>
    <div class="header">
      <el-row>
          <el-col :span="5">
            <el-input
              placeholder="请输入内容"
              v-model="diyCommodityName"
              clearable
              style="margin-left:10px;"
              >
            </el-input>
          </el-col>
          <el-col :span="5">
            <button @click="open" class="button1" >
              <span >搜索</span>
            </button>
          </el-col>
      </el-row>
    </div>
    <div class="box1" v-for="(item,index) in DIYcollectionList" :key="index">
      <div class="imgbox">
        <img class="imageone" :src="`${$imageUrl}?id=` + item.diyImageId.split(',')[0]"  style="width: 100%;height: 180px;float:left">
      </div>
      <div class="textbox">
        <p class="p1" style="font-size:20px;margin-top:10px;"><b>{{item.diyName}}</b></p>
        <p style="margin-top:10px;">
          <span style="color:red;"><b>￥{{item.diyFavorablePrice}}</b></span>
          <span style="text-decoration: line-through;margin-left:10px;font-size:1px;">￥{{item.diyFavorablePrice}}</span>
        </p>
        
      </div>
      <button class="button2" plain @click="del(item.id)" icon="el-icon-star-off"> <span class="text">取消收藏</span></button>
    </div>
</div>
</template>

<script>
export default {
  data () {
    return {
      //模糊查询的DIY商品名称
      diyCommodityName: '',
      //DIY收藏列表查询数组
      DIYcollectionList: [],
      DiyCollection: {},
      //用户id
      userId: window.sessionStorage.getItem('userId')
    }
  },

  mounted () {
    //初始化查询DIY商品收藏
    this.selectDiyCollection()
  },
  methods: {
    // 查询Diy收藏
    selectDiyCollection () {
      this.$axios.get('/handworkDiyCollection/selectHandworkDiyCollectionList',
        {
          params: {
            userId: this.userId,
            diyCommodityName: this.diyCommodityName
          }
        }).then(res => {
          if(res.data.flag){
            console.log(res);
            this.DIYcollectionList = res.data.data
          }else{
            this.DIYcollectionList = ''
            this.$message({
              message: '没有此商品',
              type: 'error'
            })
            
          }
          // console.log(this.collectionList)
      })
   
    },
    // 模糊查询
    open () {
      this.selectDiyCollection()
    },
    //取消收藏
    del(data){
      this.$axios.delete('/handworkDiyCollection/delete?id='+data).then(res => {
       if(res.data.code == 200){
         this.$message({
           message: '取消收藏成功',
           type: 'success'
         })
        this.selectDiyCollection()
      }else{
        this.$message({
          message: '取消收藏失败',
          type: 'error'
        })
      }
      })
      
    }
  }
}
</script>

<style scoped>
*{
margin: 0;
padding: 0;
}
.box1{
width: 260px;
height: 370px;
background: white;
/* background: red; */
border-radius: 25px;
overflow: hidden;
float: left;
margin: 40px;
}
.box1:hover .imageone{
transform: scale(1.2);
}
.box1:hover{
box-shadow: 0 0 10px #ccc;
}
.imgbox{
width: 260px;
height: 185px;
border-bottom: 1px solid #e6e6e6;
overflow: hidden;
}
.imageone{
width: 100%;
height: 100%;
transform: scale(1);

transition: transform .3s ease-in-out;
}
.textbox{
width: 260px;
height: 143px;
padding: 10px;
box-sizing: border-box;
/* background: green; */
}

.button2 {
border: none;
outline: none;
background-color: #FFF200;
padding: 10px 20px;
box-sizing: border-box;
font-size: 12px;
font-weight: 700;
color: black;
border-radius: 5px;
transition: all ease 0.1s;
box-shadow: 0px 5px 0px 0px #b6b005;
width:270px; 
/* margin-top:10px; */
}
.button1 {
  width: 100px;
  height: 40px;
 position: relative;
 display: flex;
 justify-content: center;
 align-items: center;
 border-radius: 5px;
 background:  #e4dd56;;
 font-family: "Montserrat", sans-serif;
 box-shadow: 0px 6px 24px 0px rgba(0, 0, 0, 0.2);
 overflow: hidden;
 border: none;
}

.button1:after {
 content: " ";
 width: 0%;
 height: 100%;
 background: #FFD401;
 position: absolute;
 transition: all 0.4s ease-in-out;
 right: 0;
}

.button1:hover::after {
 right: auto;
 left: 0;
 width: 100%;
}

.button1 span {
 text-align: center;
 text-decoration: none;
 width: 100%;
 padding: 18px 25px;
 color: #fff;
 font-size: 1.125em;
 font-weight: 700;
 letter-spacing: 0.3em;
 z-index: 20;
 transition: all 0.3s ease-in-out;
}

.button1:hover span {
 color: #183153;
 animation: scaleUp 0.3s ease-in-out;
}

@keyframes scaleUp {
 0% {
  transform: scale(1);
 }

 50% {
  transform: scale(0.95);
 }

 100% {
  transform: scale(1);
 }
}

</style>